﻿(function ($) {
    jQuery.fn.tooltipsEdit = function (options) {
        var self = this;
        var itemCounter = 0;
        var cssBorder;
        var inlineStyle;
        var selectedObj;
        var tooltipContent;


        if (options != null) {
            jQuery.fn.tooltipsEdit.options = options;
        }
        options = jQuery.fn.tooltipsEdit.options;

        var defaults = {
            ControlPath: '',
            ModuleId: 0
        };

        jQuery.extend(defaults, options);

        jQuery.extend(self,
        {
            Init: function () {
                jQuery("#tooltipsNavigation").tabs({
                    select: function (event, ui) {
                        window.location.hash = ui.tab.hash;
                    }
                });

                self.BindToolTips();

                jQuery("#currentContent").children().each(function () {
                    self.addClickEvents(this);
                    self.addHoverEvents(this);

                });

            },
            BindToolTips: function () {
                jQuery("[TwentyTechtooltip]").each(function () {
                    if (jQuery("div[id='TwentyTechtooltip" + jQuery(this).attr("TwentyTechtooltip") + "']").size() > 0) {
                        jQuery(this).qtip({
                            content: jQuery("div[id='TwentyTechtooltip" + jQuery(this).attr("TwentyTechtooltip") + "']").html(),
                            position: { my: 'top left', at: 'bottom right' },
                            hide: { fixed: true }
                        });
                    }

                });
            },
            addClickEvents: function (obj) {

                jQuery(obj).click(function (event) {
                    selectedObj = this;
                    jQuery("#myDialog").dialog({
                        title: "Add New Tooltip",
                        width: "500px",
                        modal: true,
                        buttons: {
                            "Add ToolTip": function () {
                                self.addToolTip();
                                jQuery(this).dialog("destroy");
                            },
                            "Cancel": function () {
                                jQuery("#tooltipContent").val("");
                                jQuery(this).dialog("destroy");
                            }

                        }
                    });
                    event.stopPropagation();
                });

                if (jQuery(obj).children().size() > 0) {
                    jQuery(obj).children().each(function () {
                        self.addClickEvents(this);
                    });
                }

            },
            addHoverEvents: function (obj) {

                jQuery(obj).mouseover(
                    function (event) {
                        cssBorder = jQuery(this).css("border");
                        inlineStyle = jQuery(this).attr("style");
                        jQuery(this).css("border", "2px dotted red");
                        event.stopPropagation();
                    });
                jQuery(obj).mouseout(
                    function (event) {
                        jQuery(this).css("border", cssBorder);
                        jQuery(this).attr("style", inlineStyle);
                        jQuery(this).css("border-Image", "");
                        if (jQuery(this).attr("style") == "") {
                            jQuery(this).removeAttr("style");
                        }
                        event.stopPropagation();
                    });

                if (jQuery(obj).children().size() > 0) {
                    jQuery(obj).children().each(function () {
                        self.addHoverEvents(this);
                    });
                }
            },
            addToolTip: function () {
                jQuery("#currentContentWrapper").block({
                    message: "Loading",
                    css: { border: '0px' },
                    overlayCSS: {
                        backgroundColor: '#000',
                        opacity: 0.5,
                        cursor: 'wait'
                    }
                });


                tooltipContent = jQuery("#tooltipContent").val();
                jQuery("#tooltipContent").val("");
                jQuery.ajax({
                    type: 'POST',
                    url: options.ControlPath + 'ToolTipHandler.ashx',
                    dataType: 'json',
                    data: { method: 'addtooltip', moduleId: options.ModuleId, content: tooltipContent },
                    success: function (data) {
                        self.tooltipSuccess(data);

                    },
                    error: function (data) {
                        alert("An error has occured.");
                    }
                });
            },
            updateToolTip: function (tooltipId) {
                tooltipContent = jQuery("div[TwentyTechtooltipid='" + tooltipId + "'] textarea").eq(0).val();

                jQuery.ajax({
                    type: 'POST',
                    url: options.ControlPath + 'ToolTipHandler.ashx',
                    dataType: 'json',
                    data: { "method": "updatetooltip", "moduleId": options.ModuleId, "content": tooltipContent, "tooltipId": tooltipId },
                    success: function (data) {
                        jQuery("#toolTips div[id='TwentyTechtooltip" + tooltipId + "']").remove();
                        jQuery("#toolTips").append("<div id=\"TwentyTechtooltip" + tooltipId + "\">" + tooltipContent + "</div>");
                        jQuery("[TwentyTechtooltip]").qtip('destroy');
                        self.BindToolTips();

                    },
                    error: function (data) {
                        alert("An error has occured.");
                    }
                });

                jQuery("div[TwentyTechtooltipid='" + tooltipId + "']").eq(0).block({
                    message: "<h1>Tooltip has been updated.</h1>",
                    css: { border: '1px', width: '350px', cursor: 'auto' },
                    overlayCSS: {
                        backgroundColor: '#000',
                        opacity: 0.5,
                        cursor: 'auto'
                    }
                });
                setTimeout(function () { jQuery("div[TwentyTechtooltipid='" + tooltipId + "']").eq(0).unblock(); }, 2000);

                jQuery("#toolTips div[id='TwentyTechtooltip" + tooltipId + "']").remove();
                jQuery("#toolTips").append("<div id=\"TwentyTechtooltip" + tooltipId + "\">" + tooltipContent + "</div>");
            },
            deleteToolTip: function (tooltipId) {
                if (confirm("Are you sure you want to delete this tooltip?")) {
                    jQuery.ajax({
                        type: 'POST',
                        url: options.ControlPath + 'ToolTipHandler.ashx',
                        dataType: 'json',
                        data: { "method": "deletetooltip", "moduleId": options.ModuleId, "tooltipId": tooltipId },
                        success: function (data) {
                            jQuery("#tooltipsContainer div[TwentyTechtooltipid='" + tooltipId + "']").remove();
                            jQuery("#toolTips div[id='TwentyTechtooltip" + tooltipId + "']").remove();
                            jQuery("[TwentyTechtooltip]").qtip('destroy');
                            self.BindToolTips();
                        },
                        error: function (data) {
                            alert("An error has occured.");
                        }
                    });
                }
            },
            tooltipSuccess: function (data) {
                var newToolTipId = data;
                jQuery(selectedObj).attr("TwentyTechtooltip", newToolTipId);
                jQuery(selectedObj).mouseout();
                jQuery("#toolTips").append("<div id=\"TwentyTechtooltip" + newToolTipId + "\">" + tooltipContent + "</div>");
                var contentNow = jQuery("#currentContent").clone();
                jQuery.ajax({
                    type: 'POST',
                    url: options.ControlPath + 'ToolTipHandler.ashx',
                    dataType: 'json',
                    data: { method: 'updatecontent', moduleId: options.ModuleId, content: jQuery(contentNow).html() },
                    success: function () { },
                    error: function (data) {
                        alert("An error has occured.");
                    }
                });

                $find(jQuery("div[id$='txtContent']").attr("id")).set_html(jQuery(contentNow).html());


                var newAdminObj = "<div class=\"tooltipEdit\" TwentyTechtooltipid=\"" + newToolTipId + "\">" +
                                "<div class=\"tooltipEditContent\">" +
                                    "<textarea rows=\"8\" cols=\"80\" >" + tooltipContent + "</textarea>" +
                                "</div>" +
                                "<div class=\"tooltipActions\">" +
                                    "<img src=\"" + options.ControlPath + "images/filesaveas.png\" onclick=\"$.fn.tooltipsEdit().updateToolTip(" + newToolTipId + ")\" /><br />" +
                                    "<img src=\"" + options.ControlPath + "images/delete.png\"  onclick=\"$.fn.tooltipsEdit().deleteToolTip(" + newToolTipId + ")\" />" +
                                "</div>" +
                            "</div>";
                jQuery("#tooltipsContainer").append(newAdminObj);

                self.BindToolTips();
                jQuery("#currentContentWrapper").unblock();
            }





        });

        return self;
    }

    jQuery.fn.tooltipsEdit.options = {};

})();





